<template>
  <div class="warp">
    <OrganInfo :info="applyData" />
    <a-card
      style="width: 100%"
      :tab-list="tabListNoTitle"
      :active-tab-key="titleKey"
      @tabChange="(key) => onTabChange(key)"
    >
      <template v-if="titleKey === 'to'">
        <div>
          <span>共{{ cooperationData.getJoinSum }}项，已接入{{ cooperationData.joinNum }}项</span>
          <a-button @click="handleChooseSource(1)" style="margin-left: 20px">添加接入资源</a-button>
        </div>
        <div class="list">
          <div class="item" v-for="item in cooperationData.joinList" :key="item.id" @click="handleToDetail(item)">
            <span>{{ sourceMap[item.projectType] }}</span>
            <a>{{ apStatusMap[item.apStatus] }}</a>
          </div>
        </div>
      </template>
      <template v-else-if="titleKey === 'from'">
        <div>
          <span>共{{ cooperationData.getPushSum }}项，已推送{{ cooperationData.pushNum }}项</span>
          <a-button @click="handleChooseSource(2)" style="margin-left: 20px">添加推送资源</a-button>
        </div>
        <div class="list">
          <div class="item" v-for="item in cooperationData.pushList" :key="item.id" @click="handleToDetail(item)">
            <span>{{ sourceMap[item.projectType] }}</span>
            <a>{{ apStatusMap[item.apStatus] }}</a>
          </div>
        </div>
      </template>
    </a-card>

    <PriceConfigModal ref="priceConfigModal" />
    <ChooseSourceModal ref="chooseSourceModal" @ok="getCheckedIds" />
    <SendApplyModal ref="sendApplyModal" @success="handleApplySuccess" />
  </div>
</template>

<script>
import OrganInfo from '../../components/organInfo.vue'
import Item from '../../components/item.vue'
import PriceConfigModal from '../../components/priceConfigModal.vue'
import ChooseSourceModal from '../../components/chooseSourceModal.vue'
import SendApplyModal from '../../components/sendApplyModal.vue'
import { NewData, InsertOrUpdate, CooperationInfo, sourceMap, apStatusMap } from '@/api/business/cooperation'
export default {
  components: {
    OrganInfo,
    Item,
    PriceConfigModal,
    ChooseSourceModal,
    SendApplyModal,
  },
  data() {
    return {
      tabListNoTitle: [
        {
          key: 'to',
          tab: '申请接入',
        },
        {
          key: 'from',
          tab: '向TA推送',
        },
      ],
      titleKey: 'to',
      id: undefined,
      list: [],
      submitDisabled: false,
      applyData: {},
      cooperationData: {},
      sourceMap,
      apStatusMap,
    }
  },
  methods: {
    onTabChange(key) {
      this.titleKey = key
    },
    handleShowPriceConfigModal(index, data) {
      this.$refs.priceConfigModal.show(index, { ...data, logo: this.applyData.logo, orgName: this.applyData.orgName })
    },
    handleChooseSource(cooperationType) {
      this.$message.warning('请在微信小程序 “我的 ->合作管理”中发起合作')
      // this.$refs.chooseSourceModal.show(cooperationType, this.applyData.tenantId)
    },
    getCheckedIds(ids) {
      this.$refs.sendApplyModal.show(this.applyData, ids, this.titleKey === 'to' ? 1 : 2)
    },
    handleApplySuccess() {
      this.getCooperationInfo()
    },
    async getCooperationInfo() {
      let res = await CooperationInfo({ tenantId: this.applyData.tenantId })
      this.cooperationData = res.data || {}
    },
    handleToDetail(row) {
      this.$router.push({
        path: '/business/cooperation/cooperationDetail',
        query: {
          data: JSON.stringify({
            ...row,
          }),
        },
      })
    },
  },
  created() {
    let data = JSON.parse(this.$route.query.data)
    this.applyData = data
    this.getCooperationInfo()
  },
}
</script>

<style lang="less" scoped>
.warp {
  background: #fff;
  padding: 20px;
  border-radius: 20px;
}
.content {
  padding-bottom: 20px;
}
.line2 {
  color: #999;
}
.line3 {
  .item {
    padding: 5px 10px;
    border: 1px #ccc solid;
    margin-right: 10px;
    border-radius: 5px;
  }
}
.line4 {
  font-weight: bold;
}
.mb20 {
  margin-bottom: 20px;
}

.explain {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}

.list {
  margin-top: 20px;
  width: 500px;
  .item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
  }
  .item:hover {
    background: #eee;
  }
}
</style>